<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="http://localhost:8080/layui/css/layui.css">

    <script src="//cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script src="//cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-rTTiRUKnSWaDu2FjhzWFl8/JuUZMlplyWE/djenb2LoKqkgLGfEGfSrL7XDLoB1M" crossorigin="anonymous">
</head>
<script type="text/javascript" src="http://localhost:8080/layui/layui.js"></script>
<body>
<div class="nav"><h3>宠物商店后台管理系统 </h3></div>
<div class="row">
    <div class="rowleft">
        <ul class="layui-nav layui-nav-tree" lay-filter="test">
            <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
            <li id="data" class="layui-nav-item"><a href="/petback/data">产品和用户数据</a></li>
            <li id="pet" class="layui-nav-item">
                <a href="javascript:;">商品管理</a>
                <dl class="layui-nav-child">
                    <dd ><a id="cat"  href="/petback/cats">管理--猫</a></dd>
                    <dd ><a id="dog"  href="/petback/dogs">管理--狗</a></dd>
                    <dd ><a id="fish"  href="/petback/reptiles">管理--鱼</a></dd>
                    <dd ><a id="bird"  href="/petback/birds">管理--鸟</a></dd>
                </dl>
            </li>
            <li id="order" class="layui-nav-item"><a href="/petback/order">订单管理</a></li>
            <li id="user" class="layui-nav-item"><a href="/petback/user">用户信息管理</a></li>
        </ul>
    </div>
    <div style="display: flex;flex-direction: column; align-items: center">
        <div class="rowrighttop"
             style="width: 100%; margin-top: 10px;margin-bottom: 10px; display: flex;flex-direction: row;justify-content: flex-start">
            <div class="input-group" style="margin-left: 10px">
                <input type="text" class="form-control" placeholder="Search for...">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button">Go!</button>
                    </span>
            </div>
            <button style="margin-left: 40px" type="button" class="btn btn-default" data-toggle="modal"
                    data-target="#exampleModal">
                添加商品
            </button>
        </div>

        <div class="rowright">
            <!--               内容是左右排列-->
        </div>
    </div>

</div>
<!--      修改框-->
<div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel2">Change The Pet</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" style="display: flex;flex-direction: row;justify-content: flex-start">
                <div style="display: flex;flex-direction: column;align-items: center">
                    <img id="imghead2" style="padding-bottom: 10px; height:300px;width: 250px;margin-right: 30px;"
                         src="http://localhost:8080/itempic/upload.png" alt="上传图片">
                    <input type="file" id="file2" name="file2" onchange="setImage2(this)">
                </div>
                <div  id="motext">
                    ItemID: <input id="itemid2" type="text" class="form-control" placeholder="ItemID"
                                disabled="disabled"   aria-label="Accepter" aria-describedby="addon-wrapping">
                    ListPrice: <input id="listprice2" type="text" class="form-control" placeholder=" ListPrice"
                                      aria-label="ShipCountry" aria-describedby="addon-wrapping">
                    Unicost: <input id="unicost2" type="text" class="form-control" placeholder="Unicost"
                                    aria-label="ShipCity" aria-describedby="addon-wrapping">
                    Inventory: <input id="inventory2" type="text" class="form-control" placeholder="Inventory"
                                      aria-label="DetailAddress" aria-describedby="addon-wrapping">
                    Attr: <input id="attr2" type="text" class="form-control" placeholder="Attr"
                                 aria-label="DetailAddress" aria-describedby="addon-wrapping">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="update" data-dismiss="modal">修改</button>
                <button type="button" class="btn btn-primary" id="delete" data-dismiss="modal">下架</button>
            </div>
        </div>
    </div>
</div>
<!--  添加框-->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Add The Pet</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" style="display: flex;flex-direction: row;justify-content: flex-start">
                <div style="display: flex;flex-direction: column;align-items: center">
                    <img id="imghead" style="height:300px;width: 250px;margin-right: 30px;"
                         src="http://localhost:8080/itempic/upload.png" alt="上传图片">
                    <input type="file" id="file" name="file" onchange="setImage(this)">
                </div>

                <div>
                    <div style="height: 60px; display: flex;flex-direction: column;align-items: center">
                        <text style="color: #555; font-size: 20px;font-weight:90">Please choose category</text>
                        <select style="width: 100px;height: 30px" name="category" lay-verify="" id="category">
                            <option value="CATS" selected>CATS</option>
                            <option value="DOGS">DOGS</option>
                            <option value="BIRDS">BIRDS</option>
                            <option value="REPTILES">REPTILES</option>
                        </select>
                    </div>
                    ItemID: <input id="itemid" type="text" class="form-control" placeholder="ItemID"
                                   aria-label="Accepter" aria-describedby="addon-wrapping">
                    ListPrice: <input id="listprice" type="text" class="form-control" placeholder=" ListPrice"
                                      aria-label="ShipCountry" aria-describedby="addon-wrapping">
                    Unicost: <input id="unicost" type="text" class="form-control" placeholder="Unicost"
                                    aria-label="ShipCity" aria-describedby="addon-wrapping">
                    Inventory: <input id="inventory" type="text" class="form-control" placeholder="Inventory"
                                      aria-label="DetailAddress" aria-describedby="addon-wrapping">
                    Attr: <input id="attr" type="text" class="form-control" placeholder="Attr"
                                 aria-label="DetailAddress" aria-describedby="addon-wrapping">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="submit" data-dismiss="modal">上架</button>
            </div>
        </div>
    </div>
</div>


<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-Nj1D6pu2WnJojj+67GiU9ZFNwbl7bUWX5Kj5MS22C8bGjllemM9pvQyvj14zJb58"
        crossorigin="anonymous"></script>
</body>

<script>
    function setImage(obj) {
        var file = document.getElementById("file").files[0];    //获取文件信息
        var imgdata = '';
        if (file) {
            var reader = new FileReader();  //调用FileReader
            reader.readAsDataURL(file); //将文件读取为 DataURL(base64)
            reader.onload = function (evt) {   //读取操作完成时触发。
                $("#imghead").attr('src', evt.target.result)  //将img标签的src绑定为DataURL
            };
        } else {
            console.log("上传失败");
        }
    }

    function setImage2(obj) {
        var file = document.getElementById("file2").files[0];    //获取文件信息
        var imgdata = '';
        if (file) {
            var reader = new FileReader();  //调用FileReader
            reader.readAsDataURL(file); //将文件读取为 DataURL(base64)
            reader.onload = function (evt) {   //读取操作完成时触发。
                $("#imghead2").attr('src', evt.target.result)  //将img标签的src绑定为DataURL
            };
            let formdata = new FormData();
            let img_file = document.getElementById("file2").files[0];
            formdata.append("file", img_file);
            formdata.append("id", $("#itemid2").val())
            $.ajax({
                url: "http://localhost:8080/petback/item/importPicture",
                type: "POST",
                async: false,
                processData: false,
                contentType: false,
                data: formdata,
                success: function (data) {
                    if (data['code'] === '200') {
                        layer.msg("修改成功");
                    }
                }
            })
        } else {
            console.log("上传失败");
        }
    }

    $.ajax({
        url: "http://localhost:8080/petback/item/getItemByCategory/BIRDS",
        type: "GET",
        contentType: "application/json",
        dataType: "text",
        success: function (data) {
            let json = JSON.parse(data);
            if (json['code'] === '200') {
                for (let i = 0; i < json['msg'].length; i++) {
                    $(".rowright").append("<div class=\"rowrightone\">\n" +
                        "                <img class=\"image\"\n" +
                        "                     src=\"" +json['msg'][i].picture +"\"/>\n" +
                        "                <div class=\"textbox\">\n" +
                        "                    <text style=\"display:inline-block; padding-bottom: 10px\">" + json['msg'][i].itemid + "</text>\n" +
                        "                    <text>listprice: " + json['msg'][i].listprice + "</text>\n" +
                        "                    <text>unicost:" + json['msg'][i].unicost + "</text>\n" +
                        "                    <text>inventory:" + json['msg'][i].inventory + "</text>\n" +
                        "                       <button  style=\"margin-top: 20px; width: 100px;height: 60px\" type=\"button\" class=\"layui-btn layui-btn-radius\" data-toggle=\"modal\" data-target=\"#exampleModal2\">修改</button>\n" +
                        "                </div>\n" +
                        "            </div>")
                }
            } else {
                layer.msg('网络错误')
            }
            $(".textbox>button").click(function () {
                let s = $(this).parent().children().first().text()
                $.ajax({
                    url: 'http://localhost:8080/petback/item/getItemById/'+s,
                    type : 'GET',
                    contentType : 'application/json',
                    dataType: 'text',
                    success: function (data) {
                        let json=JSON.parse(data);
                        if (json['code'] === '200'){
                            $("#itemid2").val(json['msg'].itemid);
                            $("#listprice2").val(json['msg'].listprice);
                            $("#unicost2").val(json['msg'].unicost);
                            $("#inventory2").val(json['msg'].inventory);
                            $("#attr2").val(json['msg'].attr);
                            $("#imghead2").attr("src",json["msg"].picture)
                        }
                        else {
                            layer.msg('网络错误')
                        }
                    },
                    error:function (e){
                        console.log(e)
                    }
                })
            })
        },
        error: function (e) {
            console.log("请求出错")
        }
    })

    $("#submit").click(function () {
        let formdata = new FormData();
        let img_file = document.getElementById("file").files[0];
        formdata.append("picture", img_file);
        formdata.append("id", $("#itemid").val());
        formdata.append("listprice", $("#listprice").val());
        formdata.append("unicost", $("#unicost").val());
        formdata.append("inventory", $("#inventory").val());
        formdata.append("attr", $("#attr").val());
        formdata.append("category", $("#category").val());
        $.ajax({
            url: "http://localhost:8080/petback/item/insertItem",
            type: "POST",
            async: false,
            processData: false,
            contentType: false,
            data: formdata,
            success: function (data) {
                if (data['code'] === '200') {
                    layer.msg("上传成功");
                }
            }
        })
    })
    $("#update").click(function () {
        $.ajax({
            url: "http://localhost:8080/petback/item/updateInfoById",
            type: "POST",
            contentType: "application/json",
            dataType: "JSON",
            data: JSON.stringify({
                "id": $("#itemid2").val(),
                "listprice": $("#listprice2").val(),
                "unicost": $("#unicost2").val(),
                "inventory": $("#inventory2").val(),
                "attr": $("#attr2").val()
            }),
            success: function (data) {
                if (data['code'] === '200') {
                    layer.msg("修改成功");
                }
            }
        })
    })
    $("#delete").click(function () {
        $.ajax({
            url: "http://localhost:8080/petback/item/changeToNo",
            type: "POST",
            contentType: "application/json",
            dataType: "JSON",
            data: JSON.stringify({
                "id": $("#itemid2").val()
            }),
            success: function (data){
                if (data['code'] === '200') {
                    layer.msg("下架成功");
                }
            }
        })
    })
    //选中效果
        $("#pet").addClass("layui-nav-itemed")
        $("#bird").addClass("changecolor")
        $("#bird").addClass("focus").css("pointer-events","none");
</script>

<style>

    .nav {
        background-color: #9F9F9F;
        width: 100%;
        height: 50px;
        text-align: center;
    }

    .rowleft {
        width: 200px;
        height: 550px;
        background-color: #393d49;
    }

    .row {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
    }

    .image {
        width: 200px;
        height: 250px;
    }

    .rowright {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        height: 550px;
        overflow-y: scroll;
        overflow-x: hidden;
        width: 100%;
    }

    .rowrightone {
        width: 30%;
        height: 250px;
        margin: 15px;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        box-shadow: 0px 0px 25px #c3c3c3;
    }

    .textbox {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 50px;
        padding-bottom: 35px;
        width: 150px;
        height: 250px;
    }

    .textbox > text {
        font-size: 20px;
    }
   .changecolor{
       background-color: #009999;
   }

</style>

</html>
